<template>
  <div class="mtask">
    <div class="title">
      <div class="img-fh" @click="back">
        <img src="../../assets/img/返 回.png" alt="">
      </div>
      <div class="text">我的任务</div>
      <div>
        <img src="../../assets/img/ss.png" alt="">
      </div>
    </div>
    <div class="TRfica">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="Rectification_type"
          :options="columns"
          @change="onConfirm"
        />
        <van-dropdown-item
          v-model="CreatedTime_type"
          :options="columns1"
          @change="onConfirm1"
        />
      </van-dropdown-menu>
    </div>
    <div v-if="SecurityList.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="10"
        @load="onLoad"
      >
        <!-- :immediate-check="false" 属性关闭初始化的第一次加载 -->
        <!-- offset="200"滚动条据顶部的高度 -->
        <div v-for="(item, index) in SecurityList" :key="index" class="list">
          <div class="list_item">
            <div>
              <p v-if="item.projectType === 1">安全问题</p>
              <p v-if="item.projectType === 2">质量问题</p>
            </div>
            <div prop="Time">{{ item.createTime }}</div>
          </div>
          <div class="flex-start">
            <div class="bold">项目名称：</div>
            <div class="van-ellipsis">{{ item.projectName }}</div>
          </div>
          <div class="flex-start">
            <div class="bold">项目详情：</div>
            <div class="van-multi-ellipsis--l2 item-text">
              {{ item.detail }}
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <van-empty
      v-if="SecurityList.length === 0"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无数据"
    >
      <van-button
        round
        type="primary"
        class="bottom-button"
        @click="Upload"
      >去上传</van-button>
    </van-empty>
  </div>
</template>

<script>
import { ProblemPhotoGetList } from './fetch'
import {
  Picker,
  Field,
  Popup,
  Tab,
  Tabs,
  TabbarItem,
  Tabbar,
  Icon,
  DropdownMenu,
  DropdownItem,
  Pagination,
  Empty,
  Button,
  List
} from 'vant'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [TabbarItem.name]: TabbarItem,
    [Tabbar.name]: Tabbar,
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Pagination.name]: Pagination,
    [Empty.name]: Empty,
    [Button.name]: Button,
    [List.name]: List
  },
  data() {
    return {
      columns: [
        { text: '全部', value: 0 },
        { text: '安全问题', value: 1 },
        { text: '质量问题', value: 2 }
      ],
      columns1: [
        { text: '默认排序', value: 0 },
        { text: '时间升序', value: 1 },
        { text: '时间降序', value: 2 }
      ],
      show1: false,
      show2: false,
      TypeOfRectification: '',
      RectificationClassification: '',
      SecurityList: [],
      Rectification_type: 0,
      CreatedTime_type: 0,
      searchKey: null,
      // currentPage: 1
      pageIndex: 1,
      pageSize: 4,
      total: null,
      data: [
        {
          id: 2,
          time: '2019-04-26 10:53:19'
        },
        {
          id: 4,
          time: '2019-04-26 10:51:19'
        },
        {
          id: 1,
          time: '2019-04-26 11:04:32'
        },
        {
          id: 3,
          time: '2019-04-26 11:05:32'
        }
      ],
      loading: false,
      finished: false
    }
  },
  created() {
    // this.getSecurityList()
    this.dateData()
  },

  mounted() {
    this.getSecurityList()
  },

  methods: {
    onConfirm(value) {
      this.SecurityList = []
      this.total = 0
      this.pageIndex = 1
      this.loading = false
      this.finished = false
      this.searchKey = value
      this.getSecurityList()
    },
    onConfirm1(value) {
      // this.searchKey = value
      // this.getSecurityList()
      this.SecurityList.sort(this.dateData('createTime', value === 2))
    },
    back() {
      this.$router.go(-1)
    },
    async getSecurityList() {
      const res = await ProblemPhotoGetList(
        this.pageIndex,
        this.pageSize,
        this.searchKey
      )
      console.log(res.pageList)
      this.total = res.totalCount
      res.pageList.map((i) => {
        var a1 = i.createTime.split('T')
        i.createTime = a1[0] + ' ' + a1[1].substr(0, 5)
        return i
      })
      this.SecurityList = this.SecurityList.concat(res.pageList) || []

      // 判断数据是否结束
      if (this.SecurityList.length < this.total) {
        this.loading = false
      } else {
        this.finished = true
      }
    },
    dateData(property, bol) {
      // property是你需要排序传入的key,bol为true时是升序，false为降序
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        if (bol) {
          // 升序
          return Date.parse(value1) - Date.parse(value2)
        } else {
          // 降序
          return Date.parse(value2) - Date.parse(value1)
        }
      }
    },
    onLoad() {
      this.pageIndex++
      this.getSecurityList()
    },
    Upload() {
      this.$router.push('/sspone')
    }
  }
}
</script>

<style scoped>
.list_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_item p {
  font-weight: bold;
  font-size: 16px;
}
.item-text {
  flex: 1;
}
.list {
  font-size: 14px;
  background-color: #f1f1f1;
  margin: 10px;
  padding: 5px 10px 15px 10px;
}
.bold {
  font-weight: bold;
  width: 120px;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.flex-start div {
  padding-right: 10px;
}
.img-fh img {
  width: 0.15rem;
  height: 0.18rem;
}
.mtask {
  font-size: 18px;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 10px;
}
.TRfica {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.TRfica div {
  flex: 1;
  font-size: 18px;
}
.item-bottom {
  position: fixed;
  bottom: 0;
  left: 15%;
}
::v-deep .van-dropdown-menu__item {
  /* justify-content: flex-start; */
}
</style>
